<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">
			  
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function () {
		//注册查询列表时间
		$("#pageId").load("doPageUI", function () {
			doGetObjects();
		});
		//注册按姓名搜索事件
		$(".input-group-btn").on("click", ".btn-search", doQueryObjects);
		$(".input-group-btn").on("click",".btn-delete",doDeleteObjects);
		//全选的change时间注册及处理
		$("#checkAll").change(doChangeTBodyCheckBoxState);
	});
	//Thead中全选元素的状态影响tbody中checkbox对象状态
	function doChangeTBodyCheckBoxState(){
		//1.获取当前点击对象的checked属性的值
		var flag=$(this).prop("checked");//true or false
		//2.将tbody中所有checkbox元素的值都修改为flag对应的值。
		//第一种方案
		/* $("#tbodyId input[name='cItem']")
        .each(function(){
            $(this).prop("checked",flag);
        }); */
		//第二种方案
		$("#tbodyId input[type='checkbox']")
				.prop("checked",flag);
	}
	//Tbody中checkbox的状态影响thead中全选元素的状态
	function doChangeTHeadCheckBoxState(){
		//1.设定默认状态值
		var flag=true;
		//2.迭代所有tbody中的checkbox值并进行与操作
		$("#tbodyId input[type='checkbox']")
				.each(function(){
					flag=flag&$(this).prop("checked")
				});
		//3.修改全选元素checkbox的值为flag
		$("#checkAll").prop("checked",flag);
	}
	function doRefreshAfterDeleteOK(){
		var pageCount=$("#pageId").data("pageCount");
		var pageCurrent=$("#pageId").data("pageCurrent");
		var checked=$("#checkAll").prop("checked");
		if(pageCurrent==pageCount&&checked&&pageCurrent>1){
			pageCurrent--;
			$("#pageId").data("pageCurrent",pageCurrent);
		}
		doGetObjects();
	}



	//删除时间处理函数
	function doDeleteObjects(){
		//1.获取选中的id值
		var ids=doGetCheckedIds();
		if(ids.length==0){
			alert("至少选择一个");
			return;
		}
		//确认是否删除
		if (!confirm("您确定删除吗？")) return;
		//2.发异步请求执行删除操作
		var url="log/doDeleteObjects";
		var params={"ids":ids.toString()};
		console.log(params);
		$.post(url,params,function(result){
			if(result.state==1){
				alert(result.message);
				//doGetObjects();
				doRefreshAfterDeleteOK()
			}else{
				alert(result.message);
			}
		});
	}
	//获取选中记录的id值
	function doGetCheckedIds(){
		//定义一个数组,用于存储选中的checkbox的id值
		var array=[];//new Array();
		//获取tbody中所有类型为checkbox的input元素
		$("#tbodyId input[type=checkbox]").
				//迭代这些元素，每发现一个元素都会执行如下回调函数
				each(function(){
					//假如此元素的checked属性的值为true
					if($(this).prop("checked")){
						//调用数组对象的push方法将选中对象的值存储到数组
						array.push($(this).val());
					}
				});
		return array;
	}


	function doGetObjects() {
		var url = "log/doFindPageObjects";
		let pageCurrent=$("#pageId").data("pageCurrent")
		if(!pageCurrent)pageCurrent=1;
		let params={"pageCurrent":pageCurrent};
		//为什么此位置要获取查询参数的值?
		//一种冗余的应用方法，目的时让此函数在查询时可以重用。
		var username=$("#searchNameId").val();
		//如下语句的含义是什么？动态在json格式的js对象中添加key/value,
		if(username) params.username=username;//查询时需要
		$.getJSON(url, params, function (result) {
			doHandleQueryResponseResult(result);
		});
	}
	//处理日志查询结果
	function doHandleQueryResponseResult(result) {
		if (result.state == 1) {
			doSetTableBodyRows(result.data.records);
			doSetPagination(result.data);
		} else {
			alert(result.message);
		}
	}

	function doSetTableBodyRows(records) {
		var tBody = $("#tbodyId");
		tBody.empty();
		for (var i in records) {
			var tr = $("<tr></tr>");
			var tds = doCreateTds(records[i]);
			tr.append(tds);
			tBody.append(tr);
		}
	}
	function doCreateTds(data){
		var tds="<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'></td>"+
				"<td>"+data.username+"</td>"+
				"<td>"+data.operation+"</td>"+
				"<td>"+data.method+"</td>"+
				"<td>"+data.params+"</td>"+
				"<td>"+data.ip+"</td>"+
				"<td>"+data.time+"</td>";
		return tds;
	}
	//查询功能
	function doQueryObjects(){
		//为什么要在此位置初始化pageCurrent的值为1?
		//数据查询时页码的初始位置也应该是第一页
		$("#pageId").data("pageCurrent",1);
		//为什么要调用doGetObjects函数？
		//重用js代码，简化jS代码编写。
		doGetObjects();
	}



</script>






